import React from 'react';
import PropTypes from 'prop-types';
import { Modal } from 'antd';
import { PrimaryC, PrimaryGhostC } from '..';
import './index.less';

class ModalC extends React.Component {
  // props默认值
  static defaultProps = {
    // Modal 完全关闭后的回调	function	无
    afterClose: () => {},
    // 取消按钮文字	string|ReactNode
    cancelText: '取消',
    // 垂直居中展示 Modal	Boolean
    centered: true,
    // 是否显示右上角的关闭按钮 boolean
    closable: true,
    // 自定义关闭图标	ReactNode
    closeIcon: undefined,
    // 确定按钮 loading	boolean
    confirmLoading: undefined,
    // 关闭时销毁 Modal 里的子元素	boolean
    destroyOnClose: false,
    // 底部内容，当不需要默认底部按钮时，可以设为 footer={null}	string|ReactNode	确定取消按钮
    footer: undefined,
    // 强制渲染 Modal	boolean
    forceRender: false,
    // 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom:	HTMLElement | () => HTMLElement | Selectors | false
    getContainer: false,
    // 是否支持键盘 esc 关闭	boolean
    keyboard: true,
    // 是否展示遮罩	Boolean
    mask: true,
    // 点击蒙层是否允许关闭	boolean
    maskClosable: true,
    // 遮罩样式	object
    maskStyle: {},
    // 确认按钮文字	string|ReactNode
    okText: '确定',
    // 确认按钮类型	string
    okType: 'primary',
    // ok 按钮 props	ButtonProps
    okButtonProps: undefined,
    // cancel 按钮 props	ButtonProps
    cancelButtonProps: undefined,
    // 可用于设置浮层的样式，调整浮层位置等	object
    style: undefined,
    // 标题	string|ReactNode
    title: undefined,
    // 对话框是否可见	boolean
    visible: undefined,
    // 主体宽度	string|number
    width: 800,
    // 对话框外层容器的类名	string
    wrapClassName: undefined,
    // 设置 Modal 的 z-index	Number
    zIndex: 1000,
    // 点击遮罩层或右上角叉或取消按钮的回调	function(e)
    onCancel: () => {},
    // 点击确定回调	function(e)
    onOk: () => {},
    // 主体高度	string|number
    height: false,
  };

  render() {
    const { width, height, children, ...otherProps } = this.props;
    const maxHeight = document.body.offsetHeight - 120;
    let bodyHeight, contentHeight;

    if (height) {
      bodyHeight = maxHeight > height ? height : maxHeight;
      contentHeight = bodyHeight + 50;
    }
    otherProps.footer = otherProps.footer ? (
      otherProps.footer
    ) : otherProps.footer === null ? null : (
      <div>
        <PrimaryGhostC title={otherProps.cancelText} onClick={otherProps.onCancel} {...otherProps.cancelButtonProps} />
        <PrimaryC title={otherProps.okText} onClick={otherProps.onOk} style={{ marginLeft: '10px' }} loading={otherProps.confirmLoading} {...otherProps.okButtonProps} />
      </div>
    );
    // antd4 去掉了visible 使用open
    otherProps.open = otherProps.visible;
    delete otherProps.visible;
    const props = {
      ...otherProps,
      width: width + 40,
      bodyStyle: {
        height: contentHeight,
        maxHeight,
      },
      style: {},
    };
    return (
      <Modal {...props} className={this.props.className}>
        {children}
      </Modal>
    );
  }
}

// props类型
ModalC.propsTypes = {
  // Modal 完全关闭后的回调	function	无
  afterClose: PropTypes.func,
  // 取消按钮文字	string|ReactNode
  cancelText: PropTypes.string,
  // 垂直居中展示 Modal	Boolean
  centered: PropTypes.bool,
  // 是否显示右上角的关闭按钮 boolean
  closable: PropTypes.bool,
  // 自定义关闭图标	ReactNode
  closeIcon: PropTypes.element,
  // 确定按钮 loading	boolean
  confirmLoading: PropTypes.bool,
  // 关闭时销毁 Modal 里的子元素	boolean
  destroyOnClose: PropTypes.bool,
  // 底部内容，当不需要默认底部按钮时，可以设为 footer={null}	string|ReactNode	确定取消按钮
  footer: PropTypes.string,
  // 强制渲染 Modal	boolean
  forceRender: PropTypes.bool,
  // 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom:	HTMLElement | () => HTMLElement | Selectors | false
  getContainer: PropTypes.bool,
  // 是否支持键盘 esc 关闭	boolean
  keyboard: PropTypes.bool,
  // 是否展示遮罩	Boolean
  mask: PropTypes.bool,
  // 点击蒙层是否允许关闭	boolean
  maskClosable: PropTypes.bool,
  // 遮罩样式	object
  maskStyle: PropTypes.object,
  // 确认按钮文字	string|ReactNode
  okText: PropTypes.string,
  // 确认按钮类型	string
  okType: PropTypes.string,
  // ok 按钮 props	ButtonProps
  okButtonProps: PropTypes.object,
  // cancel 按钮 props	ButtonProps
  cancelButtonProps: PropTypes.object,
  // 可用于设置浮层的样式，调整浮层位置等	object
  style: PropTypes.object,
  // 标题	string|ReactNode
  title: PropTypes.string,
  // 对话框是否可见	boolean
  visible: PropTypes.bool,
  // 内部宽度	string|number
  width: PropTypes.number,
  // 对话框外层容器的类名	string
  wrapClassName: PropTypes.string,
  // 设置 Modal 的 z-index	Number
  zIndex: PropTypes.number,
  // 点击遮罩层或右上角叉或取消按钮的回调	function(e)
  onCancel: PropTypes.func,
  // 点击确定回调	function(e)
  onOk: PropTypes.func,
  // 内部高度	string|number
  height: PropTypes.number,
  className: PropTypes.object,
};

export default ModalC;
